<template>
        <el-row type="flex" justify="center">
          <el-col :span="18">
            <el-row type="flex" justify="center" class="row-margin">
              <el-col :span="4"><div class="grid-content bg-purple front-font">姓名:</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light info-font">{{info.real}}</div></el-col>
            </el-row>
            <el-row type="flex" justify="center" class="row-margin">
              <el-col :span="4"><div class="grid-content bg-purple front-font">身份证号:</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light info-font" >{{info.number}}</div></el-col>
            </el-row>
            <el-row type="flex" justify="center"  class="row-margin">
              <el-col :span="4"><div class="grid-content bg-purple front-font">联系方式:</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light info-font" v-model="info.phone">{{info.phone}}</div></el-col>
            </el-row>
            <el-row type="flex" justify="center" class="row-margin">
              <el-col :span="4"><div class="grid-content bg-purple front-font">邮箱:</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light info-font" v-model="info.email">{{info.email}}</div></el-col>
            </el-row>
            <el-row type="flex" justify="center" class="row-margin btn" >
              <el-col :span="4">
                <div class="grid-content bg-purple front-font">
                <el-button type="primary" @click="dialogFormVisible = true" class="btnMargin">填写或者修改个人信息</el-button>
                <!--          注册弹框 -->
                <el-dialog title="填写或者修改个人信息" :visible.sync="dialogFormVisible">
                  <el-form :model="newInfo" label-width="100px" :rules="infoRules" ref="infoRef">
                    <el-form-item label="姓名:" prop="real">
                      <el-input v-model="newInfo.real" placeholder="请输入姓名" ></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号:" prop="number">
                      <el-input v-model="newInfo.number" placeholder="请输入身份证号"  maxlength="18"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式:" prop="phone">
                      <el-input v-model="newInfo.phone" placeholder="请输入联系方式" maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱:" prop="email">
                      <el-input v-model="newInfo.email" placeholder="请输入邮箱" ></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelDialogForm">取 消</el-button>
                    <el-button type="primary" @click="updateInfo">确 定</el-button>
                  </div>
                </el-dialog>
              </div>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="apply">
                  申请成为代理商
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'generalInfo',
    data(){

      return {
        //info为个人信息
        info: {
          real:'',
          number: "",
          phone: "",
          email: ""
        },
        newInfo: {
          real:'',
          number: "",
          phone: "",
          email: ""
        },
        dialogFormVisible: false,
        infoRules:{
          real: [
            {
              required: true,
              validator: (rule, value, callback) => {
                const realnameReg = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/
                if (!value) {
                  return callback(new Error('真实姓名不能为空!!'))
                }
                setTimeout(() => {
                  if (!realnameReg.test(value)) {
                    return callback(new Error('您的真实姓名格式错误,请输入英文或汉字!'))
                  } else {
                    callback()
                  }
                }, 100)
              },
              message: "",
              trigger: "change"
            }
          ],
          number: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if (value) {
                  if (value.length == 18) {
                    if ((/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/).test(value) == false) {
                      callback(new Error("身份证格式不正确"));
                    } else {
                      callback();
                    }
                  } else {
                    callback(new Error("身份证格式不正确"));
                  }
                } else {
                  callback(new Error("身份证号码不能为空"));
                }
              },
              message: "身份证号格式不正确",
              trigger: "change"
            }
          ],
          email: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('请正确填写邮箱'));
                } else {
                  if (value !== '') {
                    var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                    if(!reg.test(value)){
                      callback(new Error('请输入有效的邮箱'));
                    }
                  }
                  callback();
                }
              },
              message: "邮箱格式不正确",
              trigger: "change"
            }
          ],
          phone: [
            { required: true, message: '请输入电话号码', trigger: 'change' },
            {
              pattern: /^1[23456789]\d{9}$/,
              message: "电话号码格式不对",
              trigger: "change"
            }
          ]
        }
      }
    },
    methods:{
      cancelDialogForm(){
        this.dialogFormVisible=false;
      },
      async updateInfo(){
        let { data: result } = await this.$http.put("/user/info", this.newInfo);
         console.log(result);
        if(result.code !== 200){
          return this.$message.error({
            //利用vue的message弹框提示信息
            message: result.message,
            duration: 2000,
          });
        }
        //成功
        this.$message.success({
          //利用vue的message弹框提示信息
          message: result.data,
          duration: 2000,
        });
        this.dialogFormVisible=false;
        this.getInfo();
      },
      async getInfo(){
        let { data : result } = await this.$http.get("/user/info");
        this.info.real=result.data.real;
        this.info.number=result.data.number;
        this.info.phone=result.data.phone;
        this.info.email=result.data.email;
         console.log(result);
      },
      async apply(){
        let { data : result } = await this.$http.post("/user/apply");
        if (result.code !== 200) {
          return this.$message.error({
            //利用vue的message弹框提示信息
            message: result.message,
            duration: 2000,
          });
        }
        this.$message.success({
          //利用vue的message弹框提示信息
          message: result.data,
          duration: 2000,
        });
        console.log(result)
      }
    },
    computed:{
      ...mapState([
        'identity'
      ])
    },
    mounted(){
      this.getInfo();
      console.log(this.identity)
    },
    components: {

    }
  }
</script>

<style scoped>
  *{
    margin: 0;
    list-style: none;
  }
  .el-header{
    background-color: #545c64;
  }
  .el-main{
    margin-top: 20px;
  }
  .row-margin{
    margin-top: 20px;
  }
  .front-font{
    font-size: 20px;
    font-weight: bold;
  }
  .info-font{
    font-size: 20px;
  }
  .btn {
    margin-top: 100px;
  }
</style>
